<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
</head>

<body>
    <div id='app'></div>
    <script>
        Vue.createApp({
            data() {
                return {
                    list: [],
                    inputValue: ''
                }
            },
            methods: {
                handleBtnAdd() {
                    console.log(this.inputValue)
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
            template: `
            <div>
               <input v-model = "inputValue"/>
               <button @click = "handleBtnAdd">添加数据</button>
               <ul>
                <li v-for = "(item,index) in list">{{index}}---{{item}}</li>
                </ul>
                </div>
            `
        }).mount('#app')
        // 指令 v-model 把data中的变量和我们输入的input的值做一个绑定，并且是一个双向绑定

        // v-model表示 对data中的inputValue 和 输入的内容做了一个绑定（相关联）
        // 双向数据绑定： 1. input输入的内容改变了，data中的inputValue就变化
        //              2. data中的inputValue变化了，input框展示的内容也变化
    </script>
</body>

</html>